<mat-progress-bar *ngIf="isLoading$|async" color="accent" mode="indeterminate" style="height: 2px"></mat-progress-bar>
<nav>
  <a mat-button routerLink="/silkCarRuntime" style="padding: 0">
    <img alt="" src="assets/img/logo.png" style="height: 48px;color: white">
  </a>
  <!--  <a mat-button routerLink="/silkCarRuntime" routerLinkActive="active">{{'Nav.silkCarRuntime'|translate}}</a>-->
  <a mat-button routerLink="/silkCarRecord" routerLinkActive="active">{{'Nav.silkCarRecord'|translate}}</a>
  <a mat-button routerLink="/packageBoxes" routerLinkActive="active">{{'Nav.packageBoxes'|translate}}</a>
  <a mat-button routerLink="/exceptionRecords" routerLinkActive="active">{{'Nav.exceptionRecords'|translate}}</a>
  <a mat-button routerLink="/notifications" routerLinkActive="active">{{'Nav.notifications'|translate}}</a>

  <button [matMenuTriggerFor]="reportMenu" mat-button type="button">{{'Nav.report'|translate}}</button>
  <mat-menu #reportMenu="matMenu">
    <a mat-menu-item routerLink="/report/doffingSilkCarRecordReport" routerLinkActive="active">{{'Nav.doffingSilkCarRecordReport'|translate}}</a>
    <a mat-menu-item routerLink="/report/productPlan" routerLinkActive="active">{{'Nav.productPlan'|translate}}</a>
    <a mat-menu-item routerLink="/report/dyeingResultsTimeline" routerLinkActive="active">{{'Nav.dyeingResultsTimeline'|translate}}</a>
    <a mat-menu-item routerLink="/report/silkExceptionReport" routerLinkActive="active">{{'Nav.silkExceptionReport'|translate}}</a>
    <button [matMenuTriggerFor]="measureMenu" mat-menu-item>{{'Nav.measureMenu'|translate}}</button>
    <button [matMenuTriggerFor]="personalSilkCarRecordMenu" mat-menu-item>{{'Nav.personalSilkCarRecordMenu'|translate}}</button>
  </mat-menu>
  <mat-menu #measureMenu="matMenu">
    <a mat-menu-item routerLink="/report/statisticReportDay" routerLinkActive="active">{{'Nav.statisticReportDay'|translate}}</a>
    <a mat-menu-item routerLink="/report/statisticReportRange" routerLinkActive="active">{{'Nav.statisticReportRange'|translate}}</a>
  </mat-menu>
  <mat-menu #personalSilkCarRecordMenu="matMenu">
    <a mat-menu-item routerLink="/report/strippingReport" routerLinkActive="active">{{'Nav.strippingReport'|translate}}</a>
    <a mat-menu-item routerLink="/report/inspectionReport" routerLinkActive="active">{{'Nav.inspectionReport'|translate}}</a>
    <a mat-menu-item routerLink="/report/dyeingReport" routerLinkActive="active">{{'Nav.dyeingReport'|translate}}</a>
    <a mat-menu-item routerLink="/report/toDtyReport" routerLinkActive="active">{{'Nav.toDtyReport'|translate}}</a>
    <a mat-menu-item routerLink="/report/toDtyConfirmReport" routerLinkActive="active">{{'Nav.toDtyConfirmReport'|translate}}</a>
  </mat-menu>

  <button [matMenuTriggerFor]="configMenu" mat-button type="button">{{'Nav.config'|translate}}</button>
  <mat-menu #configMenu="matMenu">
    <a mat-menu-item routerLink="/config/workshops" routerLinkActive="active">{{'Nav.workshops'|translate}}</a>
    <a mat-menu-item routerLink="/config/lines" routerLinkActive="active">{{'Nav.lines'|translate}}</a>
    <a mat-menu-item routerLink="/config/lineMachines" routerLinkActive="active">{{'Nav.lineMachines'|translate}}</a>
    <a mat-menu-item routerLink="/config/silkCars" routerLinkActive="active">{{'Nav.silkCars'|translate}}</a>
    <a mat-menu-item routerLink="/config/batches" routerLinkActive="active">{{'Nav.batches'|translate}}</a>
    <a mat-menu-item routerLink="/config/packageClasses" routerLinkActive="active">{{'Nav.packageClasses'|translate}}</a>
    <a mat-menu-item routerLink="/config/grades" routerLinkActive="active">{{'Nav.grades'|translate}}</a>
    <a mat-menu-item routerLink="/config/temporaryBoxes" routerLinkActive="active">{{'Nav.temporaryBoxes'|translate}}</a>
    <a mat-menu-item routerLink="/config/silkCarRecordDestinations" routerLinkActive="active">{{'Nav.silkCarRecordDestinations'|translate}}</a>
    <a *ngIf="isAdmin$|async" mat-menu-item routerLink="/admin/sapT001ls" routerLinkActive="active">{{'Nav.sapT001ls'|translate}}</a>
    <a *ngIf="isAdmin$|async" mat-menu-item routerLink="/admin/operators" routerLinkActive="active">{{'Nav.operators'|translate}}</a>
    <a *ngIf="isAdmin$|async" mat-menu-item routerLink="/admin/operatorGroups" routerLinkActive="active">{{'Nav.operatorGroups'|translate}}</a>
  </mat-menu>

  <button *ngIf="isAdmin$|async" [matMenuTriggerFor]="boardMenu" mat-button type="button">{{'Nav.board'|translate}}</button>
  <mat-menu #boardMenu="matMenu">
    <button (click)="boardAutoLineJikonAdapter()" mat-menu-item type="button">{{'Nav.board-auto-line-jikon-adapter'|translate}}</button>
    <button (click)="boardAutoLine()" mat-menu-item type="button">{{'Nav.board-auto-line'|translate}}</button>
    <button (click)="boardAbnormal()" mat-menu-item type="button">{{'Nav.board-abnormal'|translate}}</button>
    <button (click)="boardSilkCarRuntime()" mat-menu-item type="button">{{'Nav.board-silk-car-runtime'|translate}}</button>
  </mat-menu>

  <span fxFlex></span>
  <button [matMenuTriggerFor]="menu" mat-button type="button">
    {{(authInfo$|async)?.name || 'An'}}
  </button>
  <mat-menu #menu="matMenu" xPosition="before">
    <button (click)="unbudatPackageBoxes()" mat-menu-item type="button">{{'Nav.unbudatPackageBoxes'|translate}}</button>
    <button mat-menu-item type="button">Item 1</button>
    <button mat-menu-item type="button">Item 2</button>
    <ng-container *ngIf="isAdmin$|async">
      <mat-divider></mat-divider>
      <a mat-menu-item routerLink="/admin" routerLinkActive="active">{{'Nav.admin'|translate}}</a>
      <a mat-menu-item routerLink="/test/animation01" routerLinkActive="active">{{'animation01'|translate}}</a>
      <a mat-menu-item routerLink="/test/animation02" routerLinkActive="active">{{'animation02'|translate}}</a>
      <a mat-menu-item routerLink="/test/animation03" routerLinkActive="active">{{'animation03'|translate}}</a>
    </ng-container>
    <mat-divider></mat-divider>
    <button (click)="logout$.emit()" mat-menu-item type="button">{{'Common.logout'|translate}}</button>
  </mat-menu>
  <!--    <button mat-icon-button [matMenuTriggerFor]="menu" [matTooltip]="'Common.help'|translate">-->
  <!--      <mat-icon>help</mat-icon>-->
  <!--    </button>-->
</nav>
